<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80px" />
            <el-table-column prop="image" label="图片链接" />
            <el-table-column prop="link" label="广告链接" />
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-popconfirm title="你要删除这条广告吗？" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger" >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialogVisible" title="修改广告" width="50%">
            <el-form ref="advertiFormRef" :model="advertiForm" :rules="advertiFormRules" label-width="120px"
                class="demo-ruleForm" status-icon>
                <el-form-item label="图片链接" prop="image">
                    <el-input v-model="advertiForm.image" />
                </el-form-item>
                <el-form-item label="广告链接" prop="link">
                    <el-input v-model="advertiForm.link" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="submitForm()">修改</el-button>
                    <el-button type="primary" @click="dialogVisible = false">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ElMessage } from "element-plus";
    import { onMounted, ref, reactive } from 'vue'
    import axios from "axios";

    const tableData = ref([])
    const dialogVisible = ref(false)
    onMounted(() => {
        getList()
    })
    const getList = async()=>{
        const res = await axios.get("/adminapi/adverti/list")
        console.log(res.data)
        tableData.value = res.data.data
    }
    const advertiFormRef = ref()
    const advertiForm = reactive({
        id:'',
        image: '',
        link: ''
    })
    const advertiFormRules = reactive({
        image: [
            { required: true, message: '请输入图片链接', trigger: 'blur' }
        ],
        link: [
            { required: true, message: '请输入广告链接', trigger: 'blur' }
        ]
    })
    const submitForm = ()=>{
        advertiFormRef.value.validate(async (valid)=>{
            if (valid) {
                console.log('提交',advertiForm);
                const res = await axios.post("/adminapi/adverti/update",advertiForm)
                if (res.data.ActionType==="ok") {
                    ElMessage.success("修改成功")
                    getList()
                    dialogVisible.value = false
                }else{
                    if (res.error) {
                        ElMessage.error(res.error)
                    }else{
                        ElMessage.error("修改失败")
                    }
                    
                }
            }
        })
    }
const handleEdit = (row) => {
    dialogVisible.value = true
    advertiForm.image = row.image
    advertiForm.link = row.link
    advertiForm.id = row.id

}
const handleDelete = async (row) => {
    const res = await axios.post("/adminapi/adverti/delete",{id:row.id})
    console.log(res)
    if (res.data.ActionType==="ok") {
        ElMessage.success("删除成功")
        getList()
        dialogVisible.value = false
    }else{
        if (res.error) {
            ElMessage.error(res.error)
        }else{
            ElMessage.error("删除失败")
        }
    }
}
</script>